<template>
  <div>
    <el-dialog
      :title="dialogVisibleTile"
      :visible.sync="dialogVisible"
      width="35%"
      :destroy-on-close="true"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :labelWidth="labelWidth"
        class="demo-ruleForm"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="类目名称：" prop="categoryName">
              <!-- :disabled="ruleForm.delFlag" -->
              <el-input
                v-model="ruleForm.categoryName"
                placeholder="请输入类目名称"
                @change="lmmcChange"
                maxlength="15"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="上级类目：">
              <!-- <el-cascader
                :options="sjlmList"
                v-model="ruleForm.pid"
                :disabled="disabled"
                clearable
                style="width:100%"
              ></el-cascader>-->
              <el-select
                v-model="ruleForm.pid"
                clearable
                placeholder="请选择上级类目"
                :disabled="ruleForm.pid == ''"
                style="width:100%"
              >
                <el-option
                  v-for="item in sjlmList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="类目图标："  ref="lmtbUpload">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="true"
                :before-upload="beforeUpload"
                :on-change="handleChange"
                :file-list="fileList"
                :limit="1"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">建议上传大小不超过1M，尺寸为 326*412 的图片</div>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span class="el-upload-list__item-delete" @click="delUplod(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisibleImg">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <!-- modal -->
              <cropper-modal
                ref="cropperModal"
                :optionsData="optionsData"
                @ok="handleCropperSuccess"
              ></cropper-modal>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="类目排序：">
              <el-input-number
                v-model="ruleForm.sortNum"
                :step="1"
                :min="0"
                :disabled="disabled"
                step-strictly
                placeholder="请输入大于0的整数"
                style="width:100%"
              ></el-input-number>
              数字越大，排序越前，不设置则排在最后
            </el-form-item>
            
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSure()"
          :loading="loading"
          v-if="!this.ruleForm.id"
        >保 存</el-button>
        <el-button type="primary" @click="handleUpdata()" :loading="loading" v-else>修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./index.js"></script>

<style lang="scss" scoped>
</style>